<template>
    <div class="post-navigator">
        <div class="row body">
            <div class="btn-back" @click="onPageBack">
                <img :src="require('@/assets/icon/close_dark.png')" />
            </div>

            <div class="picture icon">
                <img :src="$store.state.userInfo.avatarImg" />
            </div>

            <div class="btn-post icon right" @click="onPost">
                <img :src="require('@/assets/icon/btn_post.png')" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {},
    data() {
        return {};
    },

    methods: {
        onPageBack() {
            this.$router.go(-1);
        },
        onPost() {
            this.$emit("click-post");
        }
    }
};
</script>


<style lang="less" scoped>
.post-navigator {
    // position: fixed;
    // z-index: 1000;
    // top: 0;
    // left: 0;
    // right: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    .body {
        box-sizing: border-box;
        height: 100%;
        padding: 20px 30px;
        justify-content: space-between;
        align-items: center;
        .btn-back {
            width: 50px;
            height: 50px;
        }
        .icon {
            width: 50px;
        }
        .picture {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
        }
    }
}
</style>